{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
    <script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'css/index.css' %}">
    <title>方圆小站</title>
</head>


    <script>
            // 平滑滚动到具体位置
            $(function scroll_to_element(){
                $(".nav_con>a,.bottom_small_nav>a").click(function(){
                    $("html, body").animate({
                        scrollTop: $($(this).attr("href")).offset().top + "px"
                    }, 1500);
                    return false;
                });
            })

    </script>


    <script>




        function change_nav(){
            w_window = $(window).width();
            // 如果屏幕小
            if (w_window < 600){

                $(".left_nav").css("display", "none");
                $(".bottom_small_nav").css("display", "block")

                // 左侧导航隐藏宽度置为0
                $(".left_nav").css("width", "0px");


            }
            // 如果屏幕大
            else{

                $(".bottom_small_nav").css("display", "none")
                $(".left_nav").css("display", "block");
                // 左侧导航隐藏宽度置为300
                $(".left_nav").css("width", "300px");


            }





        }


        // 设置右侧内容宽度
        function set_right_content_width(){

            right_content_width = $(window).width() - $(".left_nav").width();

            $(".right_content").css("width",right_content_width);
            console.log(right_content_width);

            $(".left_nav").css("height", $(document).height());

        }

        // 计算右侧内容的margin
        function set_margin(parent_width, son_width) {
                // 取余数(正确)
                var remainder = parent_width % son_width;
                // 取整数商
                var quotient = (parent_width-remainder) / son_width;
                var margin_value = parseInt((parent_width - ((son_width)* quotient)) / (quotient*2));

                $(".son").css("margin-left", margin_value);
                $(".son").css("margin-right", margin_value);
            }
        // 动态调整右侧内容宽度
        function set_right_content_margin() {
                // 动态获取父标签宽度
                var parent_width = $(".parent").width();
                $("#p_width").text(parent_width);
                // 获取子标签宽度
                var son_width = $(".son:first").outerWidth();
                $("#s_width").text(son_width);
                var border_width = $(".son:first").css("border_width");
                var padding_width = $(".son:first").css("padding");
                set_margin(parent_width, son_width)

        }



        $(function(){


            change_nav();
            set_right_content_width();

            set_right_content_margin();

            $(window).resize(function () {
                set_right_content_width();
                set_right_content_margin();
                change_nav();

            });

        })



    </script>

<body>
<!--导航区-->

{% load zhao_fillter %}

<div class="bottom_small_nav">

    <a href="#find">

        <p class="mini_icon">

            <span class="mini_icon glyphicon glyphicon-send" aria-hidden="true">

            </span><br>

            <span>
                发&nbsp;&nbsp;现
            </span>

        </p>
    </a>

    <a href="#idea">


        <p class="mini_icon">

            <span class="mini_icon glyphicon glyphicon-tent" aria-hidden="true">

            </span><br>

            <span>
                创&nbsp;&nbsp;意
            </span>

        </p>
    </a>

    <a href="#grow">
        <p class="mini_icon">

            <span class="mini_icon glyphicon glyphicon-tree-deciduous" aria-hidden="true">

            </span><br>

            <span>
                生&nbsp;&nbsp;长
            </span>

        </p>
    </a>

    <a href="#evolve">


        <p class="mini_icon">

            <span class="mini_icon glyphicon glyphicon-road" aria-hidden="true">

            </span><br>

            <span>
                进&nbsp;&nbsp;化
            </span>

        </p>
    </a>

    <a href="{% url 'chatroom:happy' %}" target="_blank">


        <p class="mini_icon">

            <span class="glyphicon glyphicon-gift" aria-hidden="true">

            </span><br>

            <span>
                友&nbsp;&nbsp;聊
            </span>

        </p>
    </a>

    <a href="{% url 'note:board' %}" target="_blank">


        <p class="mini_icon">

            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            <br>

            <span>
                留&nbsp;&nbsp;言
            </span>

        </p>
    </a>

</div>


<div class="left_nav clearfix">

    <div class="nav_con">

        <div class="logo">

            <a href="">
                <img src="{% static 'images/logo.png' %}" alt="" class="img-responsive center-block">
            </a>

        </div>

        <a href="#find">
        <div class="title">


            <div class="big_title">
                <span class="glyphicon glyphicon-send" aria-hidden="true"></span>&nbsp; 发&nbsp;&nbsp;现
            </div>


        </div>
        </a>

        <a href="#idea">
        <div class="title">

            <div class="big_title"><span class="glyphicon glyphicon-tent" aria-hidden="true"></span> &nbsp;创&nbsp;&nbsp;意
            </div>
        </div>
        </a>


        <a href="#grow">
        <div class="title">

        <div class="big_title"><span class="glyphicon glyphicon-tree-deciduous" aria-hidden="true"></span> &nbsp;生&nbsp;&nbsp;长
            </div>

        </div>
        </a>


        <a href="#evolve">

        <div class="title">

            <div class="big_title"><span class="glyphicon glyphicon-road" aria-hidden="true"></span> &nbsp;进&nbsp;&nbsp;化
            </div>

        </div>

        </a>

        <a href="{% url 'chatroom:happy' %}" target="_blank">

            <div class="title">

                <div class="big_title"><span class="glyphicon glyphicon-gift" aria-hidden="true"></span> &nbsp;友&nbsp;&nbsp;聊
                </div>

            </div>

        </a>

        <a href="{% url 'note:board' %}" target="_blank">

            <div class="title">

                <div class="big_title"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> &nbsp;留&nbsp;&nbsp;言
                </div>

            </div>

        </a>

    </div>


</div>
<!--内容区-->


<div class="right_content">

    {% for big_title in big_titles %}
    <div class="part_content">


    <div class="c_big_title " id="{{ big_title.title_target_id }}">

        {{ big_title.title_name }}

    </div>


    <div class="atom_content parent">
        {% for atom in atoms %}


            {% if atom.atom_title.title_name == big_title.title_name %}

                <div class="base_image_title son">


                    <div class="base_image">
                        <a href="{{ atom.atom_outlink }}" target="_blank">
                            <img src="{% static atom.atom_image|get_image_path %}">
                            <div class="atom_id" style="display: none">{{ atom.id }}</div>
                            <div class="visits" style="display: none">{{ atom.atom_visits }}</div>
                        </a>
                    </div>


                    <div class="base_title">{{ atom.atom_name }}</div>

                    <div class="base_content">{{ atom.atom_short  }}</div>
                </div>



            {% endif %}

        {% endfor %}
        </div>

    </div>

    {% endfor %}
    <div style="width: 100%; height: 50px; float:left;">


</div>





</div>

</body>
</html>